<template>
     <div class="container">
          <!-- 欢迎卡片 -->
          <el-card
               class="welcome-card card-glass card-hover-lift"
               shadow="hover"
          >
               <div class="box">
                    <img
                         :src="userAvater"
                         alt="用户头像"
                         class="avatar pulse-animation"
                    />
                    <div class="bottom">
                         <h3 class="title" :class="'text-' + greetingTimeClass">
                              {{ getTime() }}好呀，{{
                                   userStore.username || '游客'
                              }}
                         </h3>
                         <p class="subtitle">{{ setting.title }}</p>
                         <div class="welcome-info mt-md">
                              <el-tag
                                   class="mr-sm gradient-border"
                                   size="small"
                                   type="primary"
                                   effect="plain"
                              >
                                   {{ new Date().toLocaleDateString() }}
                              </el-tag>
                              <el-tag
                                   size="small"
                                   type="info"
                                   effect="plain"
                                   class="gradient-border"
                              >
                                   {{ currentTime }}
                              </el-tag>
                         </div>
                         <div class="welcome-actions mt-lg">
                              <el-button
                                   type="primary"
                                   @click="refreshDashboard"
                                   class="gradient mr-sm"
                              >
                                   <i class="el-icon-refresh"></i>
                                   刷新数据
                              </el-button>
                              <el-button
                                   type="success"
                                   @click="viewAllProjects"
                              >
                                   <i class="el-icon-s-opportunity"></i>
                                   查看项目
                              </el-button>
                         </div>
                    </div>
               </div>
          </el-card>

          <!-- 数据概览卡片组 -->
          <div class="stats-container mt-lg">
               <el-row :gutter="20">
                    <el-col :xs="12" :sm="12" :md="8" :lg="6">
                         <el-card
                              class="stat-card card-hover-lift card-primary"
                              shadow="hover"
                         >
                              <div class="stat-header">
                                   <i
                                        class="el-icon-data-line text-primary"
                                   ></i>
                                   <h4>总监测点</h4>
                              </div>
                              <div class="stat-value">128</div>
                              <div class="stat-rate text-success">+12.5%</div>
                              <div class="stat-progress mt-sm">
                                   <div class="progress progress-sm">
                                        <div
                                             class="progress-bar primary"
                                             style="width: 85%"
                                        ></div>
                                   </div>
                              </div>
                         </el-card>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="8" :lg="6">
                         <el-card
                              class="stat-card card-hover-lift card-warning"
                              shadow="hover"
                         >
                              <div class="stat-header">
                                   <i class="el-icon-warning text-warning"></i>
                                   <h4>预警监测点</h4>
                              </div>
                              <div class="stat-value">8</div>
                              <div class="stat-rate text-danger">-5.3%</div>
                              <div class="stat-progress mt-sm">
                                   <div class="progress progress-sm">
                                        <div
                                             class="progress-bar warning"
                                             style="width: 45%"
                                        ></div>
                                   </div>
                              </div>
                         </el-card>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="8" :lg="6">
                         <el-card
                              class="stat-card card-hover-lift card-success"
                              shadow="hover"
                         >
                              <div class="stat-header">
                                   <i class="el-icon-finished text-success"></i>
                                   <h4>今日任务</h4>
                              </div>
                              <div class="stat-value">24</div>
                              <div class="stat-rate text-success">+8.2%</div>
                              <div class="stat-progress mt-sm">
                                   <div class="progress progress-sm">
                                        <div
                                             class="progress-bar success"
                                             style="width: 60%"
                                        ></div>
                                   </div>
                              </div>
                         </el-card>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="8" :lg="6">
                         <el-card
                              class="stat-card card-hover-lift card-info"
                              shadow="hover"
                         >
                              <div class="stat-header">
                                   <i class="el-icon-s-promotion text-info"></i>
                                   <h4>系统状态</h4>
                              </div>
                              <div class="stat-value">正常</div>
                              <div class="stat-progress mt-sm">
                                   <el-progress
                                        :percentage="99"
                                        type="circle"
                                        :stroke-width="4"
                                        :show-text="false"
                                   />
                              </div>
                         </el-card>
                    </el-col>
               </el-row>
          </div>

          <!-- 最近监测数据图表 -->
          <div class="charts-container mt-lg">
               <el-row :gutter="20">
                    <el-col :xs="24" :lg="12">
                         <el-card
                              class="chart-card card-glass card-hover-lift"
                              shadow="hover"
                         >
                              <template #header>
                                   <div class="card-header">
                                        <span>监测数据趋势</span>
                                        <el-select
                                             v-model="chartRange"
                                             size="small"
                                             class="chart-range-select"
                                        >
                                             <el-option
                                                  label="今日"
                                                  value="today"
                                             ></el-option>
                                             <el-option
                                                  label="本周"
                                                  value="week"
                                             ></el-option>
                                             <el-option
                                                  label="本月"
                                                  value="month"
                                             ></el-option>
                                        </el-select>
                                        <el-button
                                             type="text"
                                             size="small"
                                             class="text-primary"
                                        >
                                             <i class="el-icon-view"></i>
                                             查看详情
                                        </el-button>
                                   </div>
                              </template>
                              <div class="chart-placeholder gradient-bg">
                                   <!-- 这里可以放置ECharts图表 -->
                                   <div class="chart-loading pulse-animation">
                                        数据加载中...
                                   </div>
                              </div>
                         </el-card>
                    </el-col>
                    <el-col :xs="24" :lg="12">
                         <el-card
                              class="chart-card card-glass card-hover-lift"
                              shadow="hover"
                         >
                              <template #header>
                                   <div class="card-header">
                                        <span>设备分布情况</span>
                                        <el-button
                                             type="primary"
                                             size="small"
                                             class="glow"
                                        >
                                             <i class="el-icon-map"></i>
                                             查看地图
                                        </el-button>
                                   </div>
                              </template>
                              <div class="chart-placeholder gradient-bg">
                                   <!-- 这里可以放置ECharts图表 -->
                                   <div class="chart-loading pulse-animation">
                                        数据加载中...
                                   </div>
                              </div>
                         </el-card>
                    </el-col>
               </el-row>
          </div>

          <!-- 最近动态 -->
          <div class="activities-container mt-lg">
               <el-card shadow="hover" class="card-glass card-hover-lift">
                    <template #header>
                         <div class="card-header">
                              <span>最近动态</span>
                              <el-button
                                   type="primary"
                                   size="small"
                                   @click="viewAllActivities"
                              >
                                   查看全部
                              </el-button>
                         </div>
                    </template>
                    <div class="activities-list">
                         <div
                              v-for="(item, index) in activities"
                              :key="index"
                              class="activity-item list-item hover-scale"
                         >
                              <div
                                   class="activity-icon"
                                   :class="`activity-icon-${item.type}`"
                              >
                                   <i :class="getTypeIcon(item.type)"></i>
                              </div>
                              <div class="activity-time">{{ item.time }}</div>
                              <div class="activity-content">
                                   <div class="activity-title">
                                        {{ item.title }}
                                   </div>
                                   <div class="activity-description">
                                        {{ item.description }}
                                   </div>
                                   <el-tag
                                        :class="`tag-${item.type}`"
                                        size="small"
                                        :type="item.type"
                                   >
                                        {{ getItemTypeLabel(item.type) }}
                                   </el-tag>
                              </div>
                         </div>
                    </div>
               </el-card>
          </div>
     </div>
</template>

<script setup lang="ts">
// 引入必要的Vue函数和工具
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { getTime } from '@/utils/time'
//引入用户相关的仓库,获取当前用户的头像、昵称
import useUserStore from '@/store/modules/user'
import setting from '@/setting'
//获取存储用户信息的仓库对象
const userStore = useUserStore()

// 响应式数据
const userAvater = computed(() => {
     return userStore.avatar ? userStore.avatar : setting.logo
})

const greetingTimeClass = computed(() => {
     const hour = new Date().getHours()
     if (hour < 6) return 'info'
     if (hour < 12) return 'success'
     if (hour < 18) return 'warning'
     return 'danger'
})

// 图表时间范围选择
const chartRange = ref('today')

// 实时时间显示
const currentTime = ref('')

// 模拟活动数据
const activities: any = ref([
     {
          time: '10:23',
          title: '设备预警',
          description: '监测点 #12 的位移超过阈值，已触发预警',
          type: 'warning',
     },
     {
          time: '昨天',
          title: '系统更新',
          description: '安全监测系统已更新至最新版本 v2.1.5',
          type: 'info',
     },
     {
          time: '昨天',
          title: '数据备份',
          description: '系统数据已完成自动备份',
          type: 'success',
     },
     {
          time: '2023-10-15',
          title: '新增设备',
          description: '新增5个监测点设备，已完成初始化配置',
          type: 'primary',
     },
])

// 根据活动类型获取对应的图标
const getTypeIcon = (type: string) => {
     const iconMap: Record<string, string> = {
          warning: 'el-icon-warning',
          success: 'el-icon-success',
          info: 'el-icon-info',
          primary: 'el-icon-star-on',
          danger: 'el-icon-circle-close',
     }
     return iconMap[type] || 'el-icon-info'
}

// 根据活动类型获取对应的标签
const getItemTypeLabel = (type: string) => {
     const labelMap: Record<string, string> = {
          warning: '预警',
          success: '成功',
          info: '信息',
          primary: '重要',
          danger: '危险',
     }
     return labelMap[type] || '信息'
}

// 更新当前时间
const updateCurrentTime = () => {
     currentTime.value = new Date().toLocaleTimeString()
}

// 刷新仪表盘数据
const refreshDashboard = () => {
     console.log('刷新仪表盘数据')
     // 这里可以添加刷新逻辑
}

// 查看所有项目
const viewAllProjects = () => {
     console.log('查看所有项目')
     // 这里可以添加路由跳转逻辑
}

// 查看所有活动
const viewAllActivities = () => {
     console.log('查看所有活动')
     // 这里可以添加路由跳转逻辑
}

// 生命周期
let timeInterval: number | null = null

onMounted(() => {
     updateCurrentTime()
     timeInterval = window.setInterval(updateCurrentTime, 1000)
     console.log('首页加载完成')
})

onUnmounted(() => {
     if (timeInterval) {
          clearInterval(timeInterval)
     }
})
</script>

<style scoped lang="scss">
.container {
     width: 100%;
     height: 100%;
     padding: 20px;
     overflow-y: auto;
     position: relative;
     animation: fadeIn 0.5s ease-out;
}

/* 欢迎卡片样式 */
.welcome-card {
     position: relative;
     overflow: hidden;
     animation: slideInUp 0.5s ease-out;

     &::before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 200px;
          height: 200px;
          background: linear-gradient(
               135deg,
               rgba(57, 106, 177, 0.1) 0%,
               transparent 100%
          );
          border-radius: 50%;
          transform: translate(50%, -50%);
          z-index: 0;
     }

     .box {
          display: flex;
          align-items: center;
          padding: 24px;
          position: relative;
          z-index: 1;

          @media (max-width: 768px) {
               flex-direction: column;
               text-align: center;
          }
     }

     .avatar {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          border: 3px solid rgba(57, 106, 177, 0.5);
          transition: all 0.3s ease;
          box-shadow: 0 0 20px rgba(57, 106, 177, 0.3);

          &:hover {
               transform: scale(1.05);
               box-shadow: 0 0 25px rgba(57, 106, 177, 0.5);
          }

          @media (max-width: 480px) {
               width: 80px;
               height: 80px;
               margin-bottom: 16px;
          }
     }

     .bottom {
          margin-left: 24px;

          @media (max-width: 768px) {
               margin-left: 0;
               margin-top: 16px;
          }
     }

     .title {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 12px;
          transition: all 0.3s ease;

          &:hover {
               transform: translateX(5px);
          }

          @media (max-width: 480px) {
               font-size: 20px;
          }
     }

     .subtitle {
          font-size: 16px;
          color: #a0aec0;
          margin-bottom: 16px;
          font-style: normal;

          @media (max-width: 480px) {
               font-size: 14px;
          }
     }

     .welcome-info {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;

          @media (max-width: 480px) {
               justify-content: center;
          }

          .el-tag {
               background: rgba(57, 106, 177, 0.1);
               color: #4299e1;
               border-color: rgba(57, 106, 177, 0.3);
               transition: all 0.3s ease;

               &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(57, 106, 177, 0.3);
               }
          }

          .el-tag--info {
               background: rgba(38, 198, 218, 0.1);
               color: #26c6da;
               border-color: rgba(38, 198, 218, 0.3);
          }
     }

     .welcome-actions {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;

          @media (max-width: 480px) {
               flex-direction: column;

               .el-button {
                    width: 100%;
               }
          }
     }
}

/* 统计卡片样式 */
.stats-container {
     animation: fadeIn 0.6s ease-out 0.2s both;

     .stat-card {
          transition: all 0.3s ease;
          padding: 20px;

          &:hover {
               transform: translateY(-5px);
          }

          .stat-header {
               display: flex;
               align-items: center;
               margin-bottom: 16px;

               i {
                    font-size: 24px;
                    margin-right: 12px;
               }

               h4 {
                    margin: 0;
                    font-size: 16px;
                    font-weight: 600;
                    color: #666;
               }
          }

          .stat-value {
               font-size: 36px;
               font-weight: 700;
               margin-bottom: 8px;
               line-height: 1;
               transition: all 0.3s ease;

               &:hover {
                    transform: scale(1.05);
               }
          }

          .stat-rate {
               font-size: 14px;
               font-weight: 500;

               &.text-success {
                    color: #67c23a;
               }

               &.text-danger {
                    color: #f56c6c;
               }
          }

          .stat-progress {
               margin-top: 16px;

               .el-progress {
                    width: 60px;
                    height: 60px;
                    margin: 0 auto;
               }
          }
     }
}

/* 图表容器样式 */
.charts-container {
     animation: fadeIn 0.6s ease-out 0.4s both;

     .chart-card {
          transition: all 0.3s ease;
          height: 100%;
          display: flex;
          flex-direction: column;

          &:hover {
               box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          }

          .card-header {
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 0;
               margin-bottom: 16px;

               span {
                    font-weight: 600;
                    font-size: 16px;
               }

               .chart-range-select {
                    width: 100px;
                    margin-right: 10px;
               }
          }

          .chart-placeholder {
               flex: 1;
               height: 300px;
               display: flex;
               align-items: center;
               justify-content: center;
               background: linear-gradient(
                    135deg,
                    rgba(240, 242, 245, 0.5) 0%,
                    rgba(240, 242, 245, 0.2) 100%
               );
               border-radius: 8px;
               position: relative;
               overflow: hidden;

               &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(
                         45deg,
                         rgba(57, 106, 177, 0.05) 25%,
                         transparent 25%,
                         transparent 50%,
                         rgba(57, 106, 177, 0.05) 50%,
                         rgba(57, 106, 177, 0.05) 75%,
                         transparent 75%,
                         transparent
                    );
                    background-size: 20px 20px;
                    animation: moveBackground 20s linear infinite;
               }
          }

          .chart-loading {
               font-size: 16px;
               color: #606266;
               position: relative;
               z-index: 1;
               padding: 20px 40px;
               border-radius: 8px;
               background: rgba(255, 255, 255, 0.8);
               box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
          }
     }
}

/* 活动列表样式 */
.activities-container {
     animation: fadeIn 0.6s ease-out 0.6s both;

     .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0;
          margin-bottom: 20px;

          span {
               font-weight: 600;
               font-size: 16px;
          }
     }

     .activities-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
     }

     .activity-item {
          display: flex;
          align-items: flex-start;
          padding: 16px;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 8px;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
          border-left: 3px solid transparent;

          &::before {
               content: '';
               position: absolute;
               left: 0;
               top: 0;
               bottom: 0;
               width: 3px;
               background: currentColor;
               opacity: 0;
               transition: opacity 0.3s ease;
          }

          &:hover {
               transform: translateX(5px);
               box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

               &::before {
                    opacity: 1;
               }
          }

          .activity-icon {
               width: 36px;
               height: 36px;
               display: flex;
               align-items: center;
               justify-content: center;
               border-radius: 50%;
               margin-right: 16px;
               flex-shrink: 0;

               i {
                    font-size: 18px;
                    color: #fff;
               }

               &.activity-icon-warning {
                    background: #e6a23c;
               }

               &.activity-icon-success {
                    background: #67c23a;
               }

               &.activity-icon-info {
                    background: #909399;
               }

               &.activity-icon-primary {
                    background: #409eff;
               }

               &.activity-icon-danger {
                    background: #f56c6c;
               }
          }

          .activity-time {
               font-size: 13px;
               color: #909399;
               margin-right: 16px;
               flex-shrink: 0;
               align-self: center;
          }

          .activity-content {
               flex: 1;
          }

          .activity-title {
               font-weight: 600;
               font-size: 15px;
               margin-bottom: 4px;
               color: #303133;
          }

          .activity-description {
               font-size: 14px;
               color: #606266;
               margin-bottom: 8px;
               line-height: 1.5;
          }
     }
}

/* 进度条样式 */
.progress {
     height: 6px;
     background: #ecf5ff;
     border-radius: 3px;
     overflow: hidden;
     position: relative;

     &.progress-sm {
          height: 4px;
     }

     .progress-bar {
          height: 100%;
          border-radius: 3px;
          background: #409eff;
          transition: width 0.6s ease;

          &.primary {
               background: #409eff;
          }

          &.success {
               background: #67c23a;
          }

          &.warning {
               background: #e6a23c;
          }

          &.danger {
               background: #f56c6c;
          }

          &.info {
               background: #909399;
          }
     }
}

/* 标签样式 */
.tag {
     display: inline-block;
     padding: 2px 8px;
     font-size: 12px;
     border-radius: 4px;
     font-weight: 500;
     transition: all 0.3s ease;

     &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }

     &.tag-primary {
          background: #ecf5ff;
          color: #409eff;
     }

     &.tag-success {
          background: #f0f9ff;
          color: #67c23a;
     }

     &.tag-warning {
          background: #fdf6ec;
          color: #e6a23c;
     }

     &.tag-info {
          background: #f4f4f5;
          color: #909399;
     }

     &.tag-danger {
          background: #fef0f0;
          color: #f56c6c;
     }
}

/* 间距辅助类 */
.mt-md {
     margin-top: 16px;
}

.mt-lg {
     margin-top: 24px;
}

.mr-sm {
     margin-right: 8px;
}

/* 动画定义 */
@keyframes fadeIn {
     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes moveBackground {
     0% {
          background-position: 0 0;
     }

     100% {
          background-position: 100px 100px;
     }
}

/* 响应式布局 */
@media (max-width: 1200px) {
     .stats-container .stat-value {
          font-size: 28px;
     }
}

@media (max-width: 768px) {
     .container {
          padding: 16px;
     }

     .charts-container .chart-card {
          margin-bottom: 20px;
     }

     .activities-list .activity-item {
          flex-direction: column;
          align-items: flex-start;

          .activity-time {
               margin-right: 0;
               margin-bottom: 8px;
          }

          .activity-icon {
               margin-bottom: 12px;
          }
     }
}

.stat-card {
     background: #1a1a2e;
     border: 1px solid #3e4c5e;
     border-radius: 8px;
     transition: all 0.3s ease;
     height: 100%;
     position: relative;
     overflow: hidden;
}

.stat-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 80px;
     height: 80px;
     background: linear-gradient(
          135deg,
          transparent 0%,
          rgba(57, 106, 177, 0.1) 100%
     );
     border-radius: 50%;
     transform: translate(50%, 50%);
}

.stat-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
     border-color: rgba(57, 106, 177, 0.5);
}

.stat-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 12px;
}

.stat-header i {
     font-size: 24px;
     opacity: 0.8;
}

.stat-header h4 {
     font-size: 14px;
     color: #a0aec0;
     margin: 0;
     font-weight: normal;
}

.stat-value {
     font-size: 32px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 4px;
}

.stat-rate {
     font-size: 12px;
     font-weight: 500;
}

.stat-progress {
     margin-top: 12px;
}

.stat-progress .el-progress-bar__outer {
     background-color: rgba(57, 106, 177, 0.1);
     border-radius: 2px;
}

.stat-progress .el-progress-bar__inner {
     border-radius: 2px;
}

/* 图表容器样式 */
.charts-container {
     animation: slideInUp 0.5s ease-out 0.2s both;
}

.chart-card {
     background: #1a1a2e;
     border: 1px solid #3e4c5e;
     border-radius: 8px;
     transition: all 0.3s ease;
     height: 300px;
     display: flex;
     flex-direction: column;
}

.chart-card:hover {
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
     border-color: rgba(57, 106, 177, 0.5);
}

.card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0;
     font-size: 14px;
     color: #ffffff;
}

.card-header .el-button {
     font-size: 12px;
     padding: 0;
     height: auto;
     min-height: auto;
     color: #4299e1;
}

.card-header .el-button:hover {
     color: #63b3ed;
     background: transparent;
}

.chart-placeholder {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.1);
     margin: 16px;
     border-radius: 4px;
     position: relative;
}

.chart-loading {
     color: #a0aec0;
     font-size: 14px;
}

/* 活动列表样式 */
.activities-container {
     animation: slideInUp 0.5s ease-out 0.3s both;
}

.activities-container .el-card {
     background: #1a1a2e;
     border: 1px solid #3e4c5e;
     border-radius: 8px;
     transition: all 0.3s ease;
}

.activities-container .el-card:hover {
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
     border-color: rgba(57, 106, 177, 0.5);
}

.activities-list {
     padding: 8px 0;
}

.activity-item {
     display: flex;
     align-items: flex-start;
     padding: 16px 0;
     border-bottom: 1px solid rgba(62, 76, 94, 0.5);
     position: relative;
     transition: all 0.3s ease;
}

.activity-item:last-child {
     border-bottom: none;
}

.activity-item:hover {
     transform: translateX(5px);
}

.activity-item:hover .activity-title {
     color: #4299e1;
}

.activity-time {
     flex: 0 0 60px;
     font-size: 12px;
     color: #718096;
     text-align: right;
     padding-right: 16px;
}

.activity-content {
     flex: 1;
}

.activity-title {
     font-size: 14px;
     color: #ffffff;
     font-weight: 500;
     margin-bottom: 4px;
     transition: color 0.3s ease;
}

.activity-description {
     font-size: 12px;
     color: #a0aec0;
     line-height: 1.5;
}

.activity-dot {
     flex: 0 0 10px;
     height: 10px;
     border-radius: 50%;
     margin-top: 4px;
     background: #4299e1;
}

.activity-dot.bg-success {
     background: #38a169;
}

.activity-dot.bg-warning {
     background: #ed8936;
}

.activity-dot.bg-danger {
     background: #e53e3e;
}

.activity-dot.bg-info {
     background: #3182ce;
}

/* 响应式设计 */
@media (max-width: 768px) {
     .container {
          padding: 16px;
     }

     .welcome-card .box {
          flex-direction: column;
          text-align: center;
     }

     .welcome-card .avatar {
          margin-bottom: 16px;
     }

     .welcome-card .bottom {
          margin-left: 0;
     }

     .welcome-card .title {
          font-size: 24px;
     }

     .stat-card {
          margin-bottom: 16px;
     }

     .stat-card .stat-value {
          font-size: 24px;
     }

     .chart-card {
          height: 250px;
          margin-bottom: 16px;
     }
}

@media (max-width: 480px) {
     .container {
          padding: 8px;
     }

     .welcome-card .box {
          padding: 16px;
     }

     .welcome-card .avatar {
          width: 80px;
          height: 80px;
     }

     .welcome-card .title {
          font-size: 20px;
     }

     .welcome-card .subtitle {
          font-size: 14px;
     }
}

/* 动画定义 */
@keyframes slideInUp {
     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}
</style>
